<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>研学旅行</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
	<link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>

</head>
<style>
	.layui-input, .layui-textarea {
    display: inline;
    width: 15%;
    padding-left: 10px;
    
	}
	.layui-form-select {
    position: relative;
    width: 700px;
	}
	
	.layui-form-select .layui-edge {
    position: absolute;
    right: 495px;
    top: 50%;
    margin-top: 14px;
    cursor: pointer;
    border-width: 6px;
    border-top-color: #ffffff;
    border-top-style: solid;
    transition: all .3s;
    -webkit-transition: all .3s;
}
	.layui-select-title{
		float: left;
	}
	
	.layui-form-select .layui-input {
    padding-right: 30px;
    cursor: pointer;
    width: 100px;
}

/*.layui-form-select dl dt, .layui-form-select dl dd {
    padding: 0 10px;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 300px;
}*/

</style>
<body>
    <!-- 顶部开始 -->
    <div class="container" th:include="head :: header">
    	
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
        	<div id="side-nav"  th:include="left :: left_nav">
        	
        	</div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <blockquote class="layui-elem-quote">
           		 满意度调查
            </blockquote>
            <div class="">
                	<label class="layui-form-label">项目名称:</label>
                	<select class="layui-select" id="select" onchange="show()" style="width: 150px;">
                		<option th:each="itme,state : ${projects}" th:text="${itme.projectname}">
                			
                		</option>
                	</select>
                	
            </div>
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main" style="width: 100%;height:400px;"></div>
                        <blockquote class="layui-elem-quote" style="text-align: center;">
           		<p style="font-size:20px;font-weight:600;">满意度表格数据图</p>
            	<a id="daoru" class="layui-btn" style="position:absolute;right: 50px;top:540px" onclick="daoru()" >生成Excel文件</a>
                <br>
                <table class="layui-table" >
  					<thead>
  						<tr>
  							<th>反馈</th>
  							<th>数量</th>
  						</tr>
  					</thead>
  					<tbody id="tb">
  							
  					</tbody>
				</table>
            </blockquote>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <div class="footer">
        <div class="copyright">Copyright ©2019 研学旅行管理系统</div>  
    </div>
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
    <div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="./images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
        
        <script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/js/echarts-for-x-admin.js}"></script>
		<script type="text/javascript" th:src="@{/js/vue.js}" ></script>
		<script type="text/javascript">
		
     	 function daoru(){
     		var projectname = $("#select").val();
     		QuestionExcel = "http://localhost:8080/QuestionExcel?projectname="+projectname;
      		window.location.href=QuestionExcel; 
      	}
     	 
     	 
 var vue = new Vue({
       		 
       		 el:".bg-out",
       		 data : {
       			 series : []
       		 }
       		 
       	 });
 	show();
	function show(){
		var name = $("#select").val();
		  $.ajax({
 			url:"http://localhost:8080/toAjaxQuestion",
 			data:{
 				projectName : name
 			},
 			type:"post",
 			dataType:"json",
 			success:function(data){
 				for(var i = 0;i<data.length;i++){
 					vue.series[i]={
 				            name:'选择人数',
 				            type:'bar',
 				            barWidth: '60%',
 				            data:data[i].numcount
 				        }
 					
 				}
 				
 				hi();
 				happy(name);
 			}
 			
 		}); 
	}
	
    function happy(name){
    	$.ajax({
 			url:"http://localhost:8080/toAjaxQuestionTwo",
 			data:{
 				name:name
 			},
 			type:"post",
 			dataType:"json",
 			success:function(data){
 				var list=[
 					{"name":"满意"},
 					{"name":"一般"},
 					{"name":"很差"}
 					]
 				var user='';
 				for(var i =0;i<data.length;i++){
 					user+="<tr>";
					user+="<td>"+list[i].name+"</td>";
					user+="<td>"+data[i].numcount+"</td>";
					user+="</tr>";
				}
 				$("#tb").html(" ");
				$("#tb").append(user);
 			}
 			
 		});
    }
	
	function hi(){
		var dom = document.getElementById("main");
		
		setTimeout(function(){
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		app.title = '坐标轴刻度与标签对齐';

		option = {
		    color: ['#3398DB'],
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
				show: true,
             feature: {
                 dataZoom: {
                     yAxisIndex: 'none'
                 },
                 magicType: {type: ['line', 'bar']},
                 restore: {},
                 saveAsImage: {}
             },
             itemSize:18,//工具栏 icon 的大小
             iconStyle:{
                 normal:{
                   borderColor:'skyblue',
                   
                 }
             
             }
          },title: {
              text: '项目反馈统计'
          },
		    xAxis : [
		        {
		            type : 'category',
		            data : ['满意', '一般', '很差'],
		            axisTick: {
		                alignWithLabel: true
		            }
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    series : vue.series
		};
		;
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}
		},100)
	}
		$(function(){
			
		});
        
        </script>
</body>
</html>